<template>
  <div>
    <div class="signinform" style="with:100%" >
      <h1>Play Sign In Form</h1>
      <!-- container -->
      <div style="width:800px">
        <!-- main content -->
        <div class="w3l-form-info">
          <div class="w3l_form">
            <div class="left_grid_info">
              <img src="../../assets/img/register/image.svg" alt="" />
            </div>
          </div>
          <div class="w3_info">
            <h2>注册</h2>
            <form :model="registerUser" class="mt-4">
              <div class="input-group">
                <el-row>
                  <span><i class="el-icon-s-custom"></i></span>
                  <input style="width:90%" v-model="registerUser.account" type="text" placeholder="请输入您的邮箱" >
                </el-row>
              </div>
              <div class="input-group">
                <el-row>
                  <span><i class="el-icon-lock"></i></span>
                  <input style="width:90%" v-model="registerUser.password" type="Password" placeholder="请输入密码">
                </el-row>
              </div>
              <div class="input-group">
                <el-row>
                  <span><i class="el-icon-lock"></i></span>
                  <input style="width:90%" v-model="registerUser.password1" type="Password" placeholder="请确认密码" >
                </el-row>
              </div>
            </form>
            <button class="btn btn-primary btn-block" @click="toRegister()">注册</button>

            <p class="account">拥有账户? <a href="/login"><b>去登陆</b></a></p>
          </div>
        </div>
        <!-- //main content -->
      </div>
      <!-- //container -->
      <!-- footer -->
      <div class="footer">
        <p>&copy; 2020 Play Sign In form. All Rights Reserved | Design by <a href="https://w3layouts.com/"
                                                                             target="blank">W3layouts</a></p>
      </div>
      <!-- footer -->
    </div>
  </div>
</template>

<script>
  import {isBlack} from "../../utils/common";
  import {userRegister} from "../../api/user/user";
  export default {
    components:{
      //组件引用
    },
    data() {
      return {
        registerUser: {
          account: undefined,
          password: undefined,
          password1 : undefined
        }

      }

    },
    methods:{
      toRegister() {
        if (isBlack(this.registerUser.account)) {
          this.$message.error("注册账户不为空！")
          return false;
        }
        let zg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/;
        if (!zg.test(this.registerUser.password)) {
          this.$message.error("密码必须是数字s和字母的组合！");
          return false;
        }
        if (isBlack(this.registerUser.password1)) {
          this.$message.error("注册密码不为空！")
          return false;
        }
        if (this.registerUser.password1 != this.registerUser.password) {
          this.$message.error("两次密码不相同！")
          return false;
        }
        userRegister({
          account : this.registerUser.account,
          password : this.registerUser.password
        }).then(resp => {
          this.$message.success("注册成功，快前往登陆页面登陆吧！")
          this.$router.push("/login")
        })
      }
    },
  }
</script>



<style scoped>
  @import "./register.scss";
</style>
